<template>
  <view class="my-file">
    <NavBar
      v-if="appInfoStore().isH5"
      title="我的文件"
      :backgroundColor="'#fff'"
    />
    <view
      class="my-file-contiainer"
      :class="{ 'padding-top-navbar': appInfoStore().isH5 }"
      :style="{ paddingTop: contentHeight }"
    >
      <view class="my-file-box">
        <view class="my-file-search">
          <view class="my-file-search-input">
            <nut-searchbar
              v-model="searchValue"
              placeholder="输入关键字搜索"
            >
              <template v-slot:leftin>
                <i
                  class="iconfont icon-sousuo"
                  style="font-size: 20px"
                ></i>
              </template>
            </nut-searchbar>
          </view>
          <view class="my-file-search-icon">
            <i
              class="iconfont icon-paixu"
              style="font-size: 20px"
            ></i>
            <i
              class="iconfont icon-wenjianjia"
              style="font-size: 20px"
            ></i>
          </view>
        </view>
        <view class="my-file-list">
          <view class="my-file-list-menu">
            <nut-menu>
              <template #icon>
                <i class="iconfont icon-daosanjiao"></i>
              </template>
              <nut-menu-item
                v-model="state.value1"
                :options="state.options1"
              />
            </nut-menu>
            <view class="my-file-list-menu-text"> 当前拥有<text>1</text>个文件夹，<text>5</text>个文件 </view>
          </view>
          <view class="my-file-list-con">
            <view class="my-file-list-con-item">
              <view class="file-con-box">
                <view class="file-con-left">
                  <i
                    class="iconfont icon-wenjianjia1"
                    style="font-size: 40px; color: #ffca28"
                  ></i>
                </view>
                <view class="file-con-right">
                  <view class="file-con-text">
                    <view class="file-con-right-title">文件夹名称</view>
                    <view class="file-con-right-text">薛之谦 | 2024-02-02</view>
                  </view>
                  <i
                    class="iconfont icon-gengduoshuxiangsandian"
                    style="font-size: 24px; color: #999"
                  ></i>
                </view>
              </view>
            </view>
            <view
              class="my-file-list-con-item"
              :class="{ 'file-details': isFileDetails }"
            >
              <view class="file-con-box">
                <view class="file-con-left">
                  <img
                    src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN01WBo4Ad1S9wNXv5Q8o_!!1034622205.png"
                    alt=""
                  />
                </view>
                <view class="file-con-right">
                  <view class="file-con-text">
                    <view class="file-con-right-title">2月份考勤表</view>
                    <view class="file-con-right-text">234.0KB | 2024-02-02</view>
                  </view>
                  <i
                    class="iconfont icon-gengduoshuxiangsandian"
                    style="font-size: 24px; color: #999"
                    @click="handleFileDetails"
                  ></i>
                </view>
              </view>
              <view
                class="file-operate"
                v-if="isFileDetails"
              >
                <view class="file-operate-item">
                  <nut-grid :column-num="5">
                    <nut-grid-item
                      v-for="itm in state.fileOperateList"
                      :key="itm.value"
                    >
                      <img
                        :src="itm.icon"
                        alt=""
                      />
                      <text>{{ itm.text }}</text>
                    </nut-grid-item>
                  </nut-grid>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import NavBar from "@/components/navBar/index.vue";
import { appInfoStore } from "@/stores/appInfo";
import { getNavbarInfo } from "@/utils/system";

const isFileDetails = ref(false);
const contentHeight = ref();
const navbarStyle = ref({});

const state = reactive({
  options1: [
    { text: "按格式", value: 0 },
    { text: "按大小", value: 1 },
    { text: "按时间", value: 2 },
  ],
  fileOperateList: [
    {
      icon: "https://img.alicdn.com/imgextra/i1/1034622205/O1CN01S9Ni2J1S9wNXm7sFX_!!1034622205.png",
      text: "分享",
      value: 0,
    },
    {
      icon: "https://img.alicdn.com/imgextra/i2/1034622205/O1CN01kKeLit1S9wNWEzpOe_!!1034622205.png",
      text: "移动",
      value: 1,
    },
    {
      icon: "https://img.alicdn.com/imgextra/i4/1034622205/O1CN01nxmPDc1S9wNY1KEfU_!!1034622205.png",
      text: "下载",
      value: 2,
    },
    {
      icon: "https://img.alicdn.com/imgextra/i2/1034622205/O1CN01DxUzTt1S9wNZBYWxi_!!1034622205.png",
      text: "重命名",
      value: 3,
    },
    {
      icon: "https://img.alicdn.com/imgextra/i2/1034622205/O1CN01ptJ25e1S9wNWsx1n5_!!1034622205.png",
      text: "删除",
      value: 4,
    },
  ],
  value1: 0,
  value2: "a",
});
onMounted(async () => {
  if (process.env.TARO_ENV === "weapp") {
    const { statusBarHeight } = getNavbarInfo();
    navbarStyle.value = {
      paddingTop: `${statusBarHeight}px`,
    };
    contentHeight.value = `calc(44px + ${statusBarHeight}px)`;
  }
});
const handleFileDetails = () => {
  isFileDetails.value = !isFileDetails.value;
};
</script>

<style lang="less">
@import "./index.less";
// @import "../../../../assets/css/index.css";
@import "@/assets/css/index.less";
</style>
